<template>
  <el-scrollbar class="scrollbar-handle">
    <pan-thumb :image="userinfo.headIcon" />
    <el-button
      type="primary"
      icon="el-icon-upload"
      style="margin-left: 40px"
      @click="imagecropperShow = true"
      >上传头像</el-button
    >
    <image-cropper
      lang-type="zh"
      :key="imagecropperKey"
      v-model="imagecropperShow"
      method="Post"
      :headers="headers"
      :url="uploadUrl"
      @crop-upload-success="cropSuccess"
      :noRotate="false"
    />
  </el-scrollbar>
</template>

<script>
import { mapGetters } from "vuex";
import PanThumb from "@/components/PanThumb";
import ImageCropper from "vue-image-crop-upload";
export default {
  name: "AvatarUpload",
  components: { PanThumb, ImageCropper },
  props: {},
  computed: {
    ...mapGetters(["root","userinfo","token"]),
    // 配置图片上传地址
    uploadUrl(){
      return this.root + `adminApi/UserCenter/UploadFile`
    },
    //请求Headers
    headers(){
      return {
        Authorization : "Bearer " + this.token
      }
    },
  },
  data() {
    return {
      //图像上传
      imagecropperShow: false,
      imagecropperKey: 0,
    };
  },
  methods: {
    //上传成功回调
    cropSuccess(jsonData, field) {
      this.imagecropperShow = false;
      this.imagecropperKey = this.imagecropperKey + 1;
      //更新store
      let u = this.userinfo;
      u.headIcon = jsonData.data;
      this.$store.commit("SET_USERINFO", u);
      //刷新Token（用户信息）
      this.$store.dispatch("RefeshToken");
      this.$message({
        message: "上传成功",
        type: "success",
      });
    },
  },
};
</script>